<!-- 对话列表 -->
<template>
  <div class="chat-list" v-if="chatLogList.length > 0">
    <div class="chat-list-item" v-for="(item, index) in chatLogList" :key="index">
      <div class="chat-time">{{ item.chatTime }}</div>
      <div class="chat-list-content">
        <template v-for="cell in item.list">
          <!--    我的样式      -->
          <template v-if="cell.isMe">
            <div class="chat-list-content-item myMsg">
              <div class="chat-info">
                <!--      自己不显示昵称         -->
                <!--<div class="chat-list-content-item-name">{{ cell.name }}</div>-->
                <div class="chat-list-content-item-msg">{{ cell.content }}</div>
              </div>
              <div class="chat-list-content-item-avatar pointer" @click="handleClickAvatar">
                <user-avatar :userId="0" :key="0" :width="avatarSize" />
              </div>
            </div>
          </template>
          <!--    对方的样式  todo: 是否显示昵称，群组里可设置是否显示，后面再做     -->
          <template v-else>
            <div class="chat-list-content-item otherMsg">
              <div class="chat-list-content-item-avatar pointer" @click="handleClickAvatar">
                <user-avatar :userId="userId" :key="userId" :width="avatarSize" />
              </div>
              <div class="chat-info">
                <!-- 非群聊不展示名字 -->
                <!-- <div class="chat-list-content-item-name">{{ cell.name }}</div> -->
                <div class="chat-list-content-item-msg">{{ cell.content }}</div>
              </div>
            </div>
          </template>
        </template>
      </div>
    </div>
  </div>

  <div class="app-container" v-else>
    <n-empty description="微信，记录美好生活" />
  </div>
</template>

<script setup>
import { ref } from "vue";
import { mockChatList } from "./mockList.js";

// 头像组件，点击展示详情弹框
import UserAvatar from '@/views/user/avatar/index.vue';

// 点击头像
const handleClickAvatar = () => {
  console.log('555')
}

const avatarSize = ref(34)
// 用户头像，简单模拟传参
const avatar = ref('')
// 聊天列表
const chatLogList = ref([])
// 用户id
const userId = ref(0)

// 设置头像和聊天记录，模拟的，如果不想模拟，可以用我写的nodejs版若依、简单搭建一个后台
const setChatLog = (e) => {
  userId.value = e.id;
  avatar.value = e.avatar;
  chatLogList.value = mockChatList.filter(item => item.userId === e.id)
}

defineExpose({
  setChatLog,
})
</script>

<style lang="scss" scoped>
$userNameSize: 10px; // 用户名称字体大小
$msgSize: 13px; // 聊天信息字体大小
$timeSize: 10px; // 时间字体大小
$infoMargin: 12px; // 信息科与头像间距

.chat-list {
  padding: 10px 20px;
  //height: calc(100vh - 240px);
  height: 100%;
  overflow-y: auto;
  border-bottom: 1px solid #E7E7E7;
  background-color: #F5F5F5;
}

.chat-time {
  color: #ffffff;
  background-color: #DADADA;
  line-height: 18px;
  border-radius: 4px;
  text-align: center;
  margin: 0 auto;
  padding: 0 4px;
  justify-self: center;
  font-size: $timeSize;
}

.chat-list-content-item {
  display: flex;
  flex-direction: row;
  margin-top: 12px;
  .chat-info {
    margin-left: $infoMargin;
  }
  .chat-list-content-item-name {
    font-size: $userNameSize;
    color: #666666;
  }
  .chat-list-content-item-msg {
    background-color: #ffffff;
    color: #333333;
    padding: 8px 12px;
    font-size: $msgSize;
    border-radius: 4px;
    margin-top: 2px;
    max-width: 260px;
    position: relative;
    line-height: 20px;
    &:before {
      content: '';
      width: 0;
      height: 0;
      position: absolute;
      top: 8px;
      border-top: 6px solid transparent;
      border-bottom: 6px solid transparent;
    }
  }
}
.otherMsg {
  .chat-list-content-item-msg {
    &:before {
      left: -6px;
      border-right: 6px solid #ffffff;
    }
  }
}
.myMsg {
  justify-content: flex-end;
  .chat-info {
    margin-right: $infoMargin;
  }
  .chat-list-content-item-name {
    text-align: right;
  }
  .chat-list-content-item-msg {
    background-color: #95EC69;
    &:before {
      border-left: 6px solid #95EC69;
      right: -6px;
    }
  }
}
</style>
